<template>
  <div class="body vertical center ">
    <div class="head">
      <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
        <template #content>
          <span>{{ t('route_page_withdrawals') }}</span>
        </template>
        <template #left>
          <iconpark-icon style="rotate: 180deg;" @click="router.push('/')" class="close" icon-id="you"
            size="1.2rem"></iconpark-icon>
        </template>
        <template #right></template>
      </nut-navbar>
    </div>
    <!-- 提款列表选择 -->
    <div :class="`flex space_between item_list ${item.status === 0 ? 'wh_item' : ''}`" v-for="(item, index) in typeList"
      :key="index">
      <div v-if="item.status === 0" class="bank_wh">
        <iconpark-icon icon-id="fix" size="1rem"></iconpark-icon>
        <span>{{ t('addBank_page_bankPay_wh') }}</span>
      </div>
      <div class="flex align_center item_list_l">
        <div class="bank_icon">
          <ImgT :key="item.payname" :src="`/imgs/payment/bindCard/${item.payname}.webp`" />
        </div>
        <div class="bank-txt">
          <div class="flex bank_name">
            <span class="bank_payName">{{ t(`${item.text}`) }}</span>
            <a class="wh-icon" @click="onCloseSm(item)">
              <img style="width: 1rem;height: 1rem;" src="/imgs/wallet/withdraw-help.svg" alt="">
              <!-- <iconpark-icon icon-id="Frame" size=".875rem"></iconpark-icon> -->
            </a>
          </div>
          <div class="bank_limit">{{ verifyNumberComma(String(item.min_withdraw_money)) }} ~ {{
            verifyNumberComma(String(item.max_withdraw_money)) }}</div>
        </div>
      </div>
      <div class="item_list_r">
        <a class="button_color" @click="chooseWay(item)"> {{ t('deposit_page_use') }} </a>
      </div>
    </div>

    <!-- 提款说明 -->
    <nut-dialog class="deposit_sm_modal" :visible="showSmModal" :mask-closable="false">
      <div class="form_card">
        <div class="form_container vertical">
          <div class="header rel center">
            <span >{{ t('withdraw_page_instructions') }}</span>
            <span class="close abs center pointer ">
              <Close @click="onCloseSm" icon-id="Group39368" color="#fff" size="1.5em" />
            </span>
          </div>
          <div class="body vertical center ">
            <div class="flex align_center justify_center sm_txt">
              <span>占位图</span>
            </div>
            <div class="flex space_between bank_list_item">
              <a v-for="(item, index) in usdtRecharge" :key="index">
                <ImgT :key="item.payname" :src="`/imgs/payment/icon/icon_${item.payname}.webp`" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </nut-dialog>

  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { Close } from '@nutui/icons-vue';
import { showToast } from '@nutui/nutui';
import { Local } from "@/utils/storage";
import { verifyNumberComma } from "@/utils/publicMethods.ts";
import { storeToRefs } from "pinia";
import { User } from "@/store/user.ts";
import pinia from "@/store";

const { bankCardInfoList } = storeToRefs(User(pinia));
const UserStore = User(pinia);
const { info: userInfo, roleInfo } = storeToRefs(UserStore);
const { t } = useI18n();
const router = useRouter();
const showSmModal = ref(false);
const usdtRecharge = ref<any>(); // 提款银行列表
const typeList = reactive<any>([
  {
    payname: 'bankcard_0',
    text: 'bankcard',
    min_withdraw_money: null,
    max_withdraw_money: null,
    status: null,
  },
  {
    payname: 'usdt',
    text: 'usdt',
    min_withdraw_money: null,
    max_withdraw_money: null,
    status: null,
  },
]); // 提款列表
const curWithdrawWay = ref({ payname: '' }); // 当前选择的提款方式

const withDrawType = ref(Local.get('curWithdrawWay')?.payname);
const myBankData: any = ref({
  list: [],
  cardholder_name: '',
  withdraw_pwd: '',
  phone: '',
  min_withdraw_money: '',
  max_withdraw_money: '',
  calibrationVisible: false,
})


Local.set('depositWayObj', { legalRecharge: typeList })

// 获取银行卡信息
const getBankInfo = () => {
  const req = NetPacket.req_bank_card_info_list();
  PKwebsocket.instance.send(req, true)
}
const handleBankInfoRes = (rs: any) => {
  console.log('666', rs)
  typeList[0].min_withdraw_money = rs.min_withdraw_money
  typeList[0].max_withdraw_money = rs.max_withdraw_money
  typeList[0].status = rs.bank_card_maintain_status; // 1 开启， 0 维护
  typeList[1].status = rs.usdt_maintain_status; // 1 开启， 0 维护
  typeList[1].min_withdraw_money = rs.min_usdt
  typeList[1].max_withdraw_money = rs.max_usdt
};

const onCloseSm = (data: any) => {
  Local.set('curExplainWay', data);
  router.push(`/withdrawals/explain`);
}
// 去提款
const goToWithdraw = (url: any, isMissingInfo: any) => {
  if (!curWithdrawWay.value.payname) {
    return showToast.fail(t('method_error'));
  }
  if (isMissingInfo) {
    router.replace(url);
  } else {
    router.push(url);
  }
}

// 选择提款方式
const chooseWay = (data: any) => {
  const url: any = {
    bankcard_0: `/withdrawalNext?type=bankcard_0`,
    usdt: `/withdrawalNext?type=usdt`,
  }
  withDrawType.value = data.payname
  Local.set('curWithdrawWay', data);
  
  curWithdrawWay.value = data;
  // goToWithdraw(url[data.payname]);
  if(data.payname == 'usdt') {
    getMyUsdtList(url[data.payname])
  } else {
    handleMyBankList(bankCardInfoList.value, url[data.payname])
  }
}
// const hasNavigated = ref(false); // 记录是否已经跳转过
const handleMyBankList = (res: any, url: any) => {
  console.log('==获取最新银行------', res);
  console.log('==mobile------', userInfo.value.mobile);
  console.log('==withdraw_pwd------', roleInfo.value.withdraw_pwd);
  const isMissingInfo = !userInfo.value.mobile || !roleInfo.value.withdraw_pwd || !res?.bank_card_info_list?.length;
  if (isMissingInfo) {
    goToWithdrawInfo(isMissingInfo);
    // hasNavigated.value = false;
  } else {
    goToWithdraw(url, isMissingInfo);
    // hasNavigated.value = true;
  }
  myBankData.value = {
    phone: userInfo.value.mobile || '',
    withdraw_pwd: roleInfo.value.withdraw_pwd || '',
    cardholder_name: res?.cardholder_name || '',
    min_withdraw_money: res?.min_withdraw_money || 0,
    max_withdraw_money: res?.max_withdraw_money || 0,
    min_usdt: res?.min_usdt || 0,
    list: res?.bank_card_info_list || [],
    calibrationVisible: isMissingInfo,
  };
  Local.set("myBankData", myBankData.value);
};


// 获取已绑定的usdt地址
const getMyUsdtList = (url: any,) => {
  const req = NetPacket.req_usdt_info_list();
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_usdt_info_list',
    callback: (res: any) => {
      // 银行卡提款
      if (withDrawType.value === 'usdt') {
        let list = res.usdt_info_list.reverse();
        myBankData.value.list = list
        myBankData.value.withdraw_pwd = roleInfo.value.withdraw_pwd
        myBankData.value.phone = userInfo.value.mobile
        const isMissingInfo = !userInfo.value.mobile || !roleInfo.value.withdraw_pwd || !list.length;
        if (!list.length || !userInfo.value.mobile || !roleInfo.value.withdraw_pwd) {
          goToWithdrawInfo(isMissingInfo);
        } else {
          
          goToWithdraw(url, isMissingInfo)
        }
        myBankData.value.calibrationVisible = !(list.length && userInfo.value.mobile && roleInfo.value.withdraw_pwd);
      }
      Local.set("myBankData", myBankData.value)
    }
  })
}

const infoTimer: any = ref(null)
const goToWithdrawInfo = (isMissingInfo: any) => {
  clearTimeout(infoTimer.value);
  infoTimer.value = setTimeout(() => {
    if(isMissingInfo) {
      router.push(`/withdrawal/info`)
    }else {
      router.replace(`/withdrawal/info`)
    }
  }, 500)
}

watch(
  () => bankCardInfoList.value,
  (n) => {
    handleBankInfoRes(n)
    console.log('==提现列表==', n)
  },
  {
    immediate: true
  }
);
onMounted(() => {
  setTimeout(() => {
    getBankInfo()
  }, 500);
})

</script>

<style lang='scss' scoped>
.body {
  padding: 16px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;

  .item_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 12px;
    height: 56px;
    padding: 10px 14px;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    //border: 1px solid #2E296B;
    margin-bottom: 12px;

    //&.active {
    //
    //}
    &.wh_item {
      pointer-events: none;
    }

    .bank_wh {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: rgba(0, 0, 0, .7);
      width: 100%;
      height: 100%;
      border-radius: 8px;
      top: -3px;
      left: -3px;

      img {
        width: 24px;
      }
    }

    .item_list_l {
      display: flex;
      align-items: center;

      .bank_icon {
        margin-right: 10px;

        img {
          width: 36px;
          height: 36px;
        }
      }

      .bank-txt {
        .bank_name {
          display: flex;
          color: #fff;

          .bank_payName {
            max-width: 160px;
            min-width: 60px;
          }

          .wh-icon {
            margin-left: 5px;
            width: 16px;
            height: 16px;
            //background: url(/imgs/payment/wh.webp) center no-repeat;
            //background-size: 100%;
          }
        }

        .bank_limit {
          font-size: 12px;
          color: #ED8302;
        }
      }
    }

    .item_list_r {
      a {
        display: inline-block;
        text-align: center;
        width: 64px;
        height: 32px;
        line-height: 32px;
      }
    }

  }
}
</style>